<template>
  <view class="content">
    <u-navbar v-if="addressid" :placeholder='true' title="編輯地址" rightText="删除" leftIcon="arrow-leftward"
              @leftClick="leftClick('/pages/mine/setting/address/index')" @rightClick="delAddress">
    </u-navbar>
    <u-navbar v-else :placeholder='true' title="添加新地址" leftIcon="arrow-leftward"
              @leftClick="leftClick('/pages/mine/setting/address/index')">
    </u-navbar>
    <view class="main">
      <view>
        <view class="form">
          <view class="form-l">
            <!-- 詳細地址 -->
            收貨地址
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r" style="height: 100rpx;">
            <input v-model="address.address" class="input-item" type="text" placeholder="請輸入詳細地址">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            收貨人
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="address.consignee" class="input-item" type="text" placeholder="請輸入收貨人">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            聯繫電話
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="address.mobile" class="input-item" type="text" placeholder="請輸入聯繫電話">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            電子郵箱
          </view>
          <view class="form-r">
            <input v-model="address.email" class="input-item" type="text">
          </view>
        </view>
        <view class="form" style="border-bottom: none;">
          <view class="form-l">
            傳真
          </view>
          <view class="form-r">
            <input v-model="address.fax" class="input-item" type="text">
          </view>
        </view>
      </view>
    </view>
    <view class="open">
      <view class="">
        設為默認地址
      </view>
      <u-switch activeColor="#645AED" v-model="value" @change="change"></u-switch>
    </view>
    <view class="btn" @click="editAddress">
      提交
    </view>
  </view>
</template>

<script>
import {
  deleaddress,
  editaddress,
  getaddressitem,
  addAddress
} from '@/network/api/setting.js'

export default {
  data() {
    return {
      array: ['請選擇', '中国', '美国', '巴西', '日本'],
      index: 0,
      value: false,
      address: {
        consignee: '',
        address: '',
        mobile: '',
        email: '',
        fax: '',
        status: false
      },
      addressid: '',
    }
  },
  onLoad(e) {
    this.addressid = e.address_id
  },
  onShow() {
    this.getAddress()
  },
  methods: {
    async getAddress() {
      if (!this.addressid) return
      const res = await getaddressitem(this.addressid)
      console.log(res);
      this.address = res.data.address
      if (this.address.status == 1) {
        this.value = false
      } else {
        this.value = true
      }
    },
    async editAddress() {
      if (!this.address.address) {
        return uni.showToast({
          title: '收貨地址不能为空',
          icon: 'none'
        })
      }
      if (!this.address.consignee) {
        return uni.showToast({
          title: '收貨人不能为空',
          icon: 'none'
        })
      }
      if (!this.address.mobile) {
        return uni.showToast({
          title: '聯繫電話不能为空',
          icon: 'none'
        })
      }
      if (!this.addressid) {
        const res = await addAddress(this.address)
        if (res.data.code == 1) {
          uni.showToast({
            title: '提交成功'
          })
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 1000);
        } else if (res.data.msg) {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          })
        }
      } else {
        const res = await editaddress(this.address)
        if (res.data.code == 1) {
          uni.showToast({
            title: '提交成功'
          })
          // 过一秒返回
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 1000);
        } else if (res.data.msg) {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          })
        }
      }

    },
    async delAddress() {
      let that = this
      //确定删除该地址？
      uni.showModal({
        title: '提示',
        content: '確定刪除該地址？',
        success: async function (res) {
          if (res.confirm) {
            let data = {
              address_id: that.addressid
            }
            const res = await deleaddress(data)
            if (res.data.code == 1) {
              uni.navigateBack({
                delta: 1
              })
            }
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    change(e) {
      console.log('change', e);
      if (e == false) {
        this.address.status = 1
      } else {
        this.address.status = 0
      }
    },
    bindPickerChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.index = e.detail.value
    },
    leftClick(url) {
      console.log('rightClick');
      uni.navigateTo({
        url: url
      })
    },
  }
}
</script>

<style lang="scss">
.content {
  background-color: #F5F6F9;
  width: 100%;
  height: 100vh;

  .main {
    background-color: #fff;

    .form {
      margin: 0 32rpx;
      padding: 32rpx 0;
      display: flex;
      border-bottom: 1rpx solid #DEDEDE;;

      .form-l {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
      }

      .form-r {
        margin-left: 48rpx;
        flex: 1;

        .picker {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .uni-input {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }
        }
      }
    }

  }

  .open {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    margin-top: 22rpx;
    background-color: #fff;
    padding: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .btn {
    position: absolute;
    bottom: 15rpx;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 80rpx;
    color: #FFFFFF;
    width: 686rpx;
    height: 80rpx;
    text-align: center;
    background: #645AED;
    opacity: 1;
    border-radius: 30rpx;
  }
}
</style>
